<template>
  <main-wrap>
    <div class="my-list-nodata-text" v-show="showNoData">暂无内容</div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="wrapper">
      <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="getData" ref="vanList">
        <div class="weui-cell" @click="godetail(item.id)" v-for="item in listData" :key="item.id">
          <div class="weui-cell__bd">
            <div class="weui-media-box_appmsg">
              <div class="weui-media-box__hd" v-if="rolecode !== '4' && rolecode !== '0'">
                <img class="weui-media-box__thumb" :src="item.tx" alt="">
              </div>
              <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title"><span>{{item.day}}</span><span class="mlp3">{{item.times}}</span></h4>
                <p class="weui-media-box__desc gray mtp1">{{item.place}}</p>
              </div>
            </div>
            <!-- <h4 class="weui-media-box__title"><span>{{item.day}}</span><span class="mlp3">{{item.times}}</span></h4>
            <p class="weui-media-box__desc gray mtp1">{{item.place}}</p> -->
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <router-link to="/patrolinfo" class="patrollink"><i class="iconfont">&#xe722;</i></router-link>

    <my-tab-bar :curtab="1"></my-tab-bar>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import MyTabBar from '@/components/mytabbar'
export default {
  name: 'PatrolList',
  components: {
    MainWrap,
    MyTabBar
  },
  data () {
    return {
      rolecode: localStorage.rolecode ? localStorage.rolecode : '0',

      refreshing: true,
      loading: false,
      finished: false,

      listData: [],
      curPage: 1,
      pageSize: this.cm.pageSize,
      totalPage: 1,

      showNoData: false
    }
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.wrapper'))
    this.getData()
  },
  methods: {
    getData () {
      this.cm.myajax('/api/inspection/list', {
        limit: this.pageSize,
        page: this.curPage
      }, (data) => {
        this.loading = false
        this.refreshing = false

        if (data.page.list.length === 0) {
          this.finished = true
          if (this.curPage === 1) this.showNoData = true
        } else {
          if (data.page.list.length < this.pageSize) {
            this.finished = true
          } else {
            this.finished = false
          }
          this.curPage++

          for (let i = 0; i < data.page.list.length; i++) {
            let item = data.page.list[i]
            let day = item.stime.substring(5, 10)
            let stime = item.stime.substring(11, 16)
            let etime = item.etime.substring(11, 16)
            this.listData.push({
              id: item.id,
              day: day,
              times: stime + '-' + etime,
              place: item.place,
              tx: this.cm.getAvatar(item.createByUserObj.avatarUrl)
            })
          }
        }
      })
    },
    godetail (id) {
      localStorage.curPatrolID = id
      this.$router.push('/patroldetail')
    },
    onRefresh () {
      this.curPage = 1
      this.listData = []
      this.finished = false
      this.showNoData = false
      this.finished = true // 使不触发load事件
      this.getData()
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .van-pull-refresh__track
  height: calc(100vh - 52px)

.wrapper
  overflow scroll
  height: calc(100vh - 52px)
  background white

.patrollink
  position fixed
  bottom 2rem
  right .5rem
  width 1rem
  height 1rem
  border-radius 100%
  backgroundColor: #ffffff
  box-shadow 0 0 20px #cfcfcf
  text-align center
  line-height 1rem
  .iconfont
    font-size 24px
</style>
